<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="dark">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<head>
			<title>本地影视</title>
		</head>

		<style>
			@import url("button.css");
		</style>

	<body style="background-color: rgb(44, 43, 43);">
		<video id="video" controls width="100%"></video>

		<div style="display: flex; justify-content: center; align-items: center;">
			<input style="width: 50%;" type="text" id="myInput" placeholder="请输入Url">
			<button onclick="OnPlay()">播放</button>
		</div>


		<div id="buttonContainer"></div>


		<script src="hls.js"></script>
		<script src="hls.js"></script>
		<script>
			console.log(window.location.hostname + window.location.port);
			const namesPath = "./m3u8/name.txt"; //视频文件名称文件
			const playPathName = "/m3u8/"; //播放文件夹

			function OnPlayUrl(url) {
				var video = document.getElementById('video');
				var hls = new Hls();
				hls.loadSource(url);
				hls.attachMedia(video);
				hls.on(Hls.Events.MANIFEST_PARSED, function() {
					video.play();
				});

			}

			function OnPlayName(name) {
				var url = "http://" + window.location.hostname + ":" + window.location.port + playPathName + name +
					"/index.m3u8/index.m3u8";
				OnPlayUrl(url);
			}
		</script>

		<script>
			const buttonContainer = document.getElementById('buttonContainer');

			fetch(namesPath)
				.then(response => response.text())
				.then(data => {
					//console.log(data);
					// 进一步处理数据
					const names = data.split(/\r?\n|\r/);
					names.forEach(text => {
						const button = document.createElement('button');
						button.textContent = text;
						// button.classList.add('custom-btn');
						// button.classList.add('btn-1');
						button.addEventListener('click', function() {
							// 在点击事件处理函数中获取按钮名称（这里就是按钮的文本内容）
							const buttonName = this.textContent;
							OnPlayName(buttonName);
							//console.log(`点击了按钮：${buttonName}`);
						});
						buttonContainer.appendChild(button);
					});
				})
				.catch(error => console.error(error));
		</script>


		<script>
			function OnPlay() {
				var inputValue = document.getElementById('myInput').value;
				OnPlayUrl(inputValue);
			}
		</script>




	</body>

</html>